<template>
  <view>
    <!-- 标题 -->
    <nav-custom :showSearch="false"></nav-custom>
    <!-- 地址栏 -->
    <view class="cont text-left">
      <u-cell-group v-if="orderAddress.detail">
        <u-cell size="large" :title="orderUsername" :label="orderRegion" isLink @click="handleAddress"></u-cell>
      </u-cell-group>
      <u-cell-group v-else>
        <u-cell size="large" title="请选择地址" isLink @click="handleAddress"></u-cell>
      </u-cell-group>
      <!-- 配送时间 -->
      <view class="flex justify-between padding-10 color-2c u-border-bottom f16 margin-bottom-10" style="vertical-align: middle;">
        <view class="">
          <text class="iconfont icon-shizhong color-8d"></text>配送时间
        </view>
        <view class="flex" @click="show = true">
          <text v-if="popupShow">请选择</text>
          <text v-else>{{ itemLeft[itemLeftId] }} {{ itemHour[itemRightId] }}</text>
          <u-icon name="arrow-down"></u-icon>
        </view>
      </view>
    </view>
    <!-- 商品模块 -->
    <view class="order-list" v-for="(item,idnex) in orderList" :key="item.id">
      <CartItem :item="item" :showCheck="false" :showEdit="false"></CartItem>
    </view>
    <!-- 底部结算 -->
    <view class="flexd flex justify-between">
      <text class="margin-left-15 f18">￥<text class="f30">{{ allInfo.allPrice }}</text></text>
      <view class="submit color-2c f18" @click="handlePlay">提交订单</view>
    </view>
    <!-- 模态框 -->
    <u-popup :show="show" mode="bottom" :round="10" @close="close">
      <view class="popup">
        <view class="popupTitle u-border-bottom">选择配送时间</view>
        <view class="flex justify-between">
          <view class="popupContent contentLeft u-border-right">
            <view class="popupLeft">
              <view class="popupitem" v-for="(item, index) in itemLeft" :key="index" @click="handleLeft(index)">
                <view :class="itemLeftId == index ? 'popupitemOn' : ''">{{ item }}</view>
              </view>
            </view>
          </view>
          <view class="popupContent">
            <view class="popupitem" v-for="(item, index) in itemHour" :key="index" @click="handleRight(index)">
              <view>{{ item }}<text class="iconfont icon-gouxuan margin-left-10"
                  :class="itemRightId === index ? 'color-ffe' : ''"></text></view>
            </view>
          </view>
        </view>
      </view>
    </u-popup>
    <!-- 返回拦截 -->
    <!-- <orderOverlay v-if="showOver" @showON="showON" :orderList="orderList" :orderAddress="orderAddress"
			:allInfo="allInfo"></orderOverlay> -->
  </view>
</template>

<script>
  import {
    mapGetters,
    mapState
  } from 'vuex'
  import CartItem from '@/components/cart-item.vue'
  // import orderOverlay from "../components/order-overlay.vue"
  export default {
    data() {
      return {
        show: false,
        itemLeft: [],
        itemHour: ["10:00-11:00", "11:00-12:00", "12:00-14:00", "14:00-16:00", "16:00-18:00", "18:00-19:00"],
        itemLeftId: 0,
        itemRightId: -1,
        popupShow: true,
        showOver: false
      }
    },
    components: {
      // orderOverlay,
      CartItem
    },
    computed: {
      ...mapGetters({
        orderAddress: 'address/orderAddress',
        orderList: 'cart/checkGoods', //获取选中商品
        allInfo: 'cart/allInfo' // 商品总价
      }),
      orderUsername() {
        return `${this.orderAddress.username} ${this.orderAddress.phone}`
      },
      orderRegion() {
        return `${this.orderAddress.city}${this.orderAddress.region}${this.orderAddress.detail}`
      },
      modelShow() {
        return typeof(itemRightId) == Number ? "true" : "false"
      }
    },
  onLoad() {
    console.log(this.orderRegion);
    let date = new Date() // 实例化⽇期对象
    let timeStr = '' //⽇期
    for (let i = 0; i <= 7; i++) {
      timeStr = date.getFullYear() + "-"
      timeStr += date.getMonth() + 1 + "-"
      timeStr += date.getDate() + i + " "
      let day = date.getDay() + i //星期
      let week = ''
      switch (day % 7) {
        case 0:
          week = '星期⽇'
          break
        case 1:
          week = '星期⼀'
          break
        case 2:
          week = '星期⼆'
          break
        case 3:
          week = '星期三'
          break
        case 4:
          week = '星期四'
          break
        case 5:
          week = '星期五'
          break
        case 6:
          week = '星期六'
          break
      }
      timeStr += week
      this.itemLeft.push(timeStr)
    }
    this.$store.dispatch('address/addressGetAct',this.$store.state.user.userInfo.objectId)
  },
  created() {
    let dataa = new Date().getHours()
    console.log(dataa);
  },
    // onHide() {
    //   uni.$emit('handlePlay', {
    //     'orderList': this.orderList,
    //     'orderAddress': this.orderAddress
    //   })
    // },
    methods: {
      // backDetail() {
      //   if (this.orderList.length !== 0) {
      //     this.showOver = true
      //   } else {
      //     uni.navigateTo({
      //       url: '/pages/cake/cake'
      //     })
      //   }
      // },
      // // 子组件关闭弹窗
      // showON(i) {
      //   this.showOver = i
      // },
      handleAddress() {
        uni.navigateTo({
          url: '/pagesA/address/address'
        })
      },
      handlePlay() {
        if (!this.orderAddress.detail) {
          uni.showToast({
            title: '请选择配送地址',
            icon: 'none'
          })
        } else if (this.itemRightId < 0) {
          uni.showToast({
            title: '请选择配送时间',
            icon: 'none'
          })
        } else {
          let deliveryTime = `${this.itemLeft[this.itemLeftId]} ${this.itemHour[this.itemRightId]}`
          this.$store.commit('order/addPlay', [this.orderList, {
            ...this.orderAddress,
            deliveryTime
          }, this.allInfo])
          uni.navigateTo({
            url: `/pagesA/orderPlay/orderPlay`
          })
          this.$store.commit('cart/cartRemove')
        }

      },
      showChange() {
        this.show = true
      },
      close() {
        this.show = false
      },
      handleLeft(index) {
        this.itemLeftId = index
      },
      handleRight(index) {
        this.itemRightId = index
        this.popupShow = false
        this.show = false
      }
    },
  
  }
</script>

<style lang="scss" scoped>
  page {
    background-color: white;
  }

  .justify-between {
    justify-content: space-between;
  }

  /deep/ .u-cell__body {
    padding: 20rpx;
  }

  /deep/ .u-cell__title-text[data-v-1c4434ae] {
    font-weight: bold;
  }

  /deep/ .u-icon__icon {
    font-size: 36rpx !important;
    color: #2c2c2c !important
  }

  .flexd {
    position: fixed;
    width: 100%;
    height: 100rpx;
    /* #ifdef APP-PLUS */
    height: 130rpx;
    /* #endif */
    /* #ifdef MP-WEIXIN */
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    box-sizing: content-box;
    /* #endif */
    bottom: 0;
    background-color: white;
    line-height: 100rpx;
    border-top: solid 1px #eaeaea;

    text {
      color: #F0250F;
    }

    .submit {
      height: 100%;
      width: 270rpx;
      background-color: #ffe32a;
      text-align: center;
    }
  }

  // 配送时间
  .iconMore {
    display: inline-block;
    transform: rotate(0.25turn);
  }

  // 模态框
  .popup {
    height: 600rpx;

    .popupTitle {
      font-size: 40rpx;
      text-align: center;
      font-weight: bold;
      padding: 50rpx 0 20rpx 0;
    }

    .popupContent {
      width: 50%;
      flex: 1;
      display: flex;
      justify-content: start;
      align-items: center;
      flex-direction: column;

      .popupLeft {
        height: 480rpx;
        overflow: scroll;
        width: 100%;
      }

      .popupitem {
        height: 80rpx;
        width: 100%;
        text-align: center;
        line-height: 80rpx;

        text {
          color: #e9e9e9;
        }
      }

      .popupitemOn {
        background-color: white;
      }
    }

    .contentLeft {
      background-color: #e6e6e6;

    }
  }
</style>
